<!--部门页面-->
<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="deptList"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="(selection) => chooseAll(selection)"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="deptno" label="部门编号" width="100">
      </el-table-column>
      <el-table-column prop="dname" label="部门名称" width="120">
      </el-table-column>
      <el-table-column prop="count" label="部门人数" width="120">
      </el-table-column>
      <el-table-column prop="loc" label="地址" width="500"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="deptEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deptDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-button type="primary" round @click="showDept">添加部门</el-button>
    <el-button type="warning" round @click="deleteCheckAll()"
      >删除选中</el-button
    >
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="80px">
        <el-form-item label="部门编号" prop="dno">
          <el-input v-model="dept.deptno" @keyup.native="checkDno()"></el-input>
          <span v-bind:style="styleObject">{{ msg }}</span>
        </el-form-item>
        <el-form-item label="部门名称" required>
          <el-input v-model="dept.dname"></el-input>
        </el-form-item>
        <el-form-item label="部门位置" required>
          <el-input v-model="dept.loc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="flag == 1 ? addDept() : updateDept()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 1,
      styleObject: {
        color: "red",
        fontSize: "10px",
      },
      dialogVisible: false,
      msg: "",
      dept: {},
      arrDno: [],
      deptList: [],
    };
  },
  methods: {
    deptEdit(thisrow) {
      this.flag = 0;
      var dno = thisrow.deptno;
      this.http
        .request({
          url: "dept/getOne/" + dno,
          method: "get",
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.dept = data.data;
            this.dialogVisible = true;
          } else {
            // this.$message({
            //   message: data.msg,
            //   type: "error",
            // });
          }
        });
    },
    updateDept() {
      this.http
        .request({
          url: "dept/update",
          method: "put",
          data: this.dept,
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.get();
          } else {
            // this.$message({
            //   message: data.msg,
            //   type: "error",
            // });
          }
        });
    },
    deptDelete(thisrow) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var dno = thisrow.deptno;
        this.http
          .request({
            url: "dept/delete/" + dno,
            method: "delete",
          })
          .then(({ data }) => {
            if (data.code == 1) {
              this.$message({
                message: data.msg,
                type: "success",
              });
              this.get();
            } else {
              // this.$message({
              //   message: data.msg,
              //   type: "error",
              // });
            }
          });
      });
    },
    addDept() {
      this.http
        .request({
          url: "dept/addDept",
          method: "post",
          data: this.dept,
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.get();
          } else {
            // this.$message({
            //   message: data.msg,
            //   type: "error",
            // });
          }
        });
    },
    chooseAll(choose) {
      var arr = [];
      for (const key in choose) {
        arr[key] = choose[key].deptno;
      }
      this.arrDno = arr;
    },
    deleteCheckAll() {
      this.$confirm("确认删除选中吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.http
          .request({
            url: "dept/deleteCheckAll",
            method: "delete",
            data: this.arrDno,
          })
          .then(({ data }) => {
            if (data.code == 1) {
              this.$message({
                message: data.msg,
                type: "success",
              });
              this.get();
            } else {
              // this.$message({
              //   message: data.msg,
              //   type: "error",
              // });
            }
          });
      });
    },
    showDept() {
      this.flag = 1;
      this.dialogVisible = true;
      this.dept = {};
    },
    checkDno() {
      var dno = this.dept.deptno;
      if (dno == "" || dno == null) {
        return;
      }
      this.http
        .request({
          url: "dept/checkDno/" + dno,
          mothed: "get",
        })
        .then(({ data }) => {
          if (data.code == 1) {
            console.log(data);
            this.msg = data.msg;
          } else {
            this.msg = "";
          }
        });
    },
    get() {
      this.http
        .request({
          url: "dept/DeptAndCount",
          method: "get",
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.deptList = data.data;
          } else {
            // this.$message({
            //   message: data.msg,
            //   type: "error",
            // });
          }
        });
    },
  },
  mounted() {
    this.get();
  },
};
</script>

<style>
</style>
